<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
    <div id="box" hello="world">
        我是一个div
    </div>


    <script>
        //    操作元素属性
        // 1、attr（）
        //    =>可以进行设置和获取元素的属性
        //    =>注意：一般用于操作元素的自定义属性
        //    =>注意：atter 操作的所有属性都会直接出现在元素的标签上

        //   =>获取
        //     语法：元素.attr（你要获取的属性名）
        //     返回值：该属性名对应的属性值

        //   =>设置
        //       语法：元素.attr（属性名，属性值）


        // 2、removeAttr（）
        //    =>对元素进行删除操作
        //    =>语法：元素集合.removeAttr（你要删除的属性）
        
        // 1-1 attr（）获取
        console.log($('div').attr('hello'))
        console.log($('div').attr('id'))

        // 1-2 attr（）设置
        $('div').attr('a', 100)
        $('div').attr('id', 'contairner')


        // 1-3 removeAttr()
        // $('div').removeAttr('hello')
        $('div').removeAttr('id')
        $('div').removeAttr('a')

        // 1、prop
        // 可以获取和设置元素的属性
        //  注意：
        //    当prop设置元素的原生属性，会直接相应在元素的标签身上
        //    当prop 设置元素自定义属性，不会直接响应在元素标签上，会响应在元素对象身上
        //   注意：prop 方法不能获取元素标签身上，只能获取到prop方法自己设置的自定义属性
        
        //   prop（）设置
        //       语法：元素集合.prop（属性名，属性值）
        //       返回值：该属性对应的值

     
        // 2、removeProp（）
        //    用来删除原生属性
        //   注意：
                //   不能删除原生属性
                //   只能删除由prop方法设置的自定义属性
        //   语法：元素集合.removeProp（你要删除的属性名）


        // 1-1  prop（）设置
        $('div').prop('id', 'container')
        $('div').prop('a', 100)
        console.log($('div'))
   

        // 1-2  prop（）获取
        console.log($('div').prop('id'))
        console.log($('div').prop('hello'))  //uunderfind 
        console.log($('div').prop('a'))     //100 只能拿到本身自己设置的100

        // 1-3  removeProp()
        $('div').removeProp('id')
        $('div').removeProp('a')
        console.log($('div'))
    </script>
</body>

</html>